<template>
  <div class="price-range" @mouseenter="handleShowDelete" @mouseleave="showDelete = false">
    <el-input
      :placeholder="minPricePlaceholder"
      v-model="price.minPrice"
      v-maxnum="{ obj: price, key: 'minPrice', zero: true, int: true,max:maxPrice }"
      @blur="handleBlur('minPrice')"
      @keyup.enter.stop.native="$refs['max-price'].focus()"
      @input="handleShowDelete"
    ></el-input>
    <div>
      <span :class="rangeSeparator?'':'separate'">{{ rangeSeparator?rangeSeparator:'' }}</span>
    </div>
    <el-input
      ref="max-price"
      :placeholder="maxPricePlaceholder"
      v-model="price.maxPrice"
      v-maxnum="{ obj: price, key: 'maxPrice', zero: true, int: true,max:maxPrice }"
      @blur="handleBlur('maxPrice')"
      @input="handleShowDelete"
    ></el-input>

    <span v-show="showDelete" :class="['el-icon-circle-close']" @click="$emit('change', ['',''])"></span>
  </div>
</template>

<script>
export default {
  props: {
    rangeSeparator: {
      type: String
    },
    value: {
      type: Array
    },
    minPricePlaceholder: {
      type: String,
      default: "请输入最低支付金额"
    },
    maxPricePlaceholder: {
      type: String,
      default: "请输入最高支付金额"
    },
    maxPrice:{
        type:Number|String,
        default:100000
    }
  },
  data() {
    return {
      price: {
        minPrice: "",
        maxPrice: "",
      },
      showDelete:false,
    };
  },
  model: {
    event: "change"
  },
  computed:{
    // showDelete(){
    //     return String(this.price.minPrice)||String(this.price.maxPrice)
    // }
  },
  watch: {
    value(val) {
      this.price.minPrice = val[0] || "";
      this.price.maxPrice = val[1] || "";
    }
  },
  methods: {
    handleBlur(prop) {
      const { minPrice, maxPrice } = this.price;
      if (prop === "minPrice"&&maxPrice && minPrice && Number(minPrice) > maxPrice) {
        this.price.maxPrice = "";
      } else if (prop === "maxPrice"&&minPrice && maxPrice && Number(minPrice) > maxPrice) {
        this.price.minPrice = "";
      }
      this.$emit("change", [this.price.minPrice, this.price.maxPrice]);
    },
    handleShowDelete(){
        const { minPrice, maxPrice } = this.price;
        this.showDelete = !String(minPrice)&&!String(maxPrice)?false:true
    },
  }
};
</script>

<style lang="scss" scoped>
.price-range {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  height: 29px;
  overflow: hidden;
  transform: translateY(1px);
  padding-right: 10px;
  &:hover{
    border-color:hsl(0, 0%, 79%);
    // .el-icon-circle-close{
    //     display:inline-block
    // }
  }
  .el-input {
    transform: translateY(1px);
    &::v-deep {
      input {
        border-color:transparent  !important;
        vertical-align: top;
        text-align: center;
      }
    }
    flex: 1;
  }
  .separate{
        // font-size: 20px;
        display: inline-block;
        width: 5px;
        height:1px;
        background-color: black;
        vertical-align: middle;

    }
    .el-icon-circle-close{
        // display: none;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #afafaf;
        font-size: 15px;
        cursor: pointer;
    }
}
</style>
